<template>
  <div :class="{ 'has-logo': sidebarLogo }">
    <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
    <el-scrollbar>
      <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store"

const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarLogo = computed(() => settingsStore.sidebarLogo)

const isSidebarCollapsed = computed(() => !appStore.sidebar.opened)

console.log(permissionStore.routes, '00');
const onMounted = () => {}
</script>

<style lang="scss" scoped>
.has-logo {
  .el-scrollbar {
    height: calc(100vh - $navbar-height);
  }
}
</style>
